<template>
  <el-card v-loading="loading">
    <div class="r-card-header">
      <el-button type="primary" @click="onShowEdit()">{{
        $t('workOrderClient.creatWorkOrder')
      }}</el-button>

      <Rsearch
        :placeholder="$t('workOrderClient.inoutWorkOrder')"
        @search="onSearchName"
      />
    </div>
    <Rtable :url="url" :conditions="conditions" :columns="columns" :size="17" />
    <OrderEdit
      :visible.sync="modalKeys.edit"
      :modal-data="modalData"
      @onSearch="onSearch"
    />
  </el-card>
</template>

<script>
// import { mapState, mapGetters } from 'vuex'
import Rtable from '@/components/r-table'
import Rsearch from '@/components/r-input/r-search'
import url from '@/api/url'
import { delWo, getWoInfo } from '@/api/workOrder'
import OrderEdit from './components/OrderEdit'

const modalKeys = {
  edit: false
}

export default {
  components: {
    Rtable,
    Rsearch,
    OrderEdit
  },

  data() {
    return {
      url: url.woGetPage,
      modalKeys,
      modalData: {},
      conditions: {},
      loading: false
    }
  },

  computed: {
    columns() {
      return [
        {
          label: this.$t('workOrderClient.workOrderId'),
          prop: 'workOrderId'
        },
        {
          label: this.$t('workOrderClient.orderName'),
          prop: 'orderName'
        },
        {
          label: this.$t('workOrderClient.typeName'),
          prop: 'typeName'
        },
        {
          label: this.$t('workOrderClient.moduleName'),
          prop: 'moduleName'
        },
        {
          label: this.$t('workOrderClient.orderStatus'),
          prop: 'orderStatusName',
          width: 80
        },
        {
          label: this.$t('workOrderClient.createdDate'),
          prop: 'createdDate'
        },
        {
          label: this.$t('workOrderClient.operation'),
          // prop: 'userName',
          width: 210,
          operates: [
            {
              text: this.$t('btns.view'),
              opEvent: this.onShowView
            },
            {
              text: this.$t('btns.edit'),
              opEvent: this.onShowEdit,
              props(row) {
                return { disabled: row.orderStatusCode === 'statusProcessed' }
              }
            },
            {
              text: this.$t('btns.del'),
              opEvent: this.onDel,
              props: {
                type: 'default'
              }
            }
          ]
        }
      ]
    }
  },
  mounted() {},
  methods: {
    // 查询
    onSearchName(orderName) {
      this.onSearch({ orderName })
    },
    onSearch(c) {
      this.conditions = Object.assign({}, this.conditions, c)
    },
    // 删除
    onDel(row) {
      this.$confirm(
        this.$t('workOrderClient.toDelete'),
        this.$t('workOrderClient.hint'),
        {
          // confirmButtonText: '确定',
          // cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => this.delWo(row.workOrderId))
        .catch(() => {})
    },
    // 执行删除
    async delWo(id) {
      const { success } = await delWo(id)
      if (success) {
        this.onSearch()
      }
    },
    // 显示修改/创建
    async onShowEdit(row) {
      if (row && row.workOrderId) {
        this.loading = true
        const { retData } = await getWoInfo(row.workOrderId)
        this.loading = false
        this.modalData = retData || {}
      } else {
        this.modalData = {}
      }
      this.modalKeys.edit = true
    },

    // 查看
    onShowView(row) {
      this.$router.push({
        name: 'viewWorkOrder',
        query: { viewId: row.workOrderId }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.head {
  padding-bottom: 10px;
}
</style>
